<template>
  <div class="palycontrol" v-show="!showplaying" @click="requestlyric">
    <div class="left" @click="handlerPlaying">
      <img v-if="singlesong.al" :src="singlesong.al.picUrl">
      <img v-else src="../assets/gaia.png ">
      <div class="info">
        <div v-if="singlesong.name" class="title">{{ singlesong.name }}</div>
        <div v-else>{{ $t('discover.kugouyinyue') }}</div>
        <marquee scrollamount=2 behavior="scroll" direction="left" style="width: 1rem;">
          <span class="tips">enjoy the music</span>
        </marquee>
      </div>
    </div>
    <div class="right">
      <svg @click="play" v-if="pause" t="1649946823916" class="icon" viewBox="0 0 1024 1024" version="1.1"
        xmlns="http://www.w3.org/2000/svg" p-id="15452" width="16" height="16">
        <path
          d="M510.7 962.4c-60.7 0-119.5-11.9-175-35.3-53.5-22.6-101.6-55-142.9-96.3-41.3-41.3-73.7-89.3-96.3-142.9-23.4-55.4-35.3-114.3-35.3-175s11.9-119.5 35.3-175c22.6-53.5 55-101.6 96.3-142.9 41.3-41.3 89.3-73.7 142.9-96.3 55.4-23.4 114.3-35.3 175-35.3s119.5 11.9 175 35.3c53.5 22.6 101.6 55 142.9 96.3 41.3 41.3 73.7 89.3 96.3 142.9 23.4 55.4 35.3 114.3 35.3 175s-11.9 119.5-35.3 175c-22.6 53.5-55 101.6-96.3 142.9-41.3 41.3-89.3 73.7-142.9 96.3-55.5 23.4-114.3 35.3-175 35.3z m0-854.9c-223.5 0-405.4 181.9-405.4 405.4s181.9 405.4 405.4 405.4 405.4-181.9 405.4-405.4-181.9-405.4-405.4-405.4z"
          fill="#d81e06" p-id="15453"></path>
        <path d="M404.9 336.3v352.6l305.4-176.3z" fill="#d81e06" p-id="15454"></path>
      </svg>
      <svg @click="play" v-else t="1650019072620" class="icon" viewBox="0 0 1048 1024" version="1.1"
        xmlns="http://www.w3.org/2000/svg" p-id="17749" width="14" height="14">
        <path
          d="M524.272128 0.018022C241.513165 0.018022 12.288102 229.245952 12.288102 512.005018c0 112.734003 36.43904 216.957952 98.17897 301.537997l38.667981-40.258048C97.458176 699.230003 67.143168 609.158963 67.143168 512.005018 67.143168 259.540992 271.807078 54.872986 524.272128 54.872986c252.45696 0 457.120973 204.668006 457.120973 457.132032 0 252.460954-204.664013 457.118003-457.120973 457.118003-96.240026 0-185.530982-29.744026-259.189043-80.53504l-34.539008 42.797978c83.150029 58.344038 184.437965 92.596019 293.728973 92.596019 282.758963 0 511.984026-229.220966 511.984026-511.976038C1036.256154 229.245952 807.031091 0.018022 524.272128 0.018022zM615.693107 256.011981l0 511.987 54.855 0L670.548107 256.012 615.693128 256.012zM377.996083 256.011981l0 511.987 54.855 0L432.851083 256.012 377.996128 256.012z"
          p-id="17750" fill="#d81e06"></path>
      </svg>
      <svg t="1650012354706" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="16580" width="16" height="16">
        <path
          d="M64 480h352V128H64v352z m64-288h224v224H128V192zM64 928h352V576H64v352z m64-288h224v224H128v-224zM526.848 224H928a32 32 0 1 0 0-64H526.848a32 32 0 0 0 0 64zM928 608H526.848a32 32 0 1 0 0 64H928a32 32 0 1 0 0-64zM928 384H526.848a32 32 0 0 0 0 64H928a32 32 0 1 0 0-64zM928 832H526.848a32 32 0 1 0 0 64H928a32 32 0 1 0 0-64z"
          p-id="16581"></path>
      </svg>
    </div>
  </div>
  <playing v-if="showplaying" @changeshow="changeshow" :pause="pause" msg='hah' />
  <audio ref="audio" autoplay :src="`https://music.163.com/song/media/outer/url?id=${singlesong.id}`"></audio>
</template>
 
<script setup>
import playing from '@/components/musiclist/playing.vue'
import { ref, watch, computed, onMounted } from 'vue'
import { homeStore } from '@/store/home.js'
import { musicplaycontrolStore } from '@/store/playcontrol.js'
import { storeToRefs } from 'pinia'
const musicStore = musicplaycontrolStore()
const store = homeStore()

const { playsongid, singlesong } = storeToRefs(store)
const { pause } = storeToRefs(musicStore)
if (playsongid) {
  pause.value = true;
}
// 获取音乐
let audio = ref(null)
// 监听事时间
// let pause = ref(true)
let showplaying = ref(false)
let handlerPlaying = () => {
  showplaying.value = true
}
// 从子组件触发触发的父亲显示
let changeshow = (flag) => {
  showplaying.value = flag
}
let play = () => {
  if (!store.singlesong.id) {
    console.log(1);
    return
  }
  else if (pause.value == false) {
    console.log(2);
    audio.value.play()
    musicStore.$patch({
      pause: true
    })
  }
  else {
    console.log(3);
    musicStore.$patch({
      pause: false
    })
    audio.value.pause()
  }
}
watch(pause, () => {
  if (pause.value == false) {
    audio.value.play().catch((res) => {
    })
  }
  else {
    audio.value.pause()
  }
})
let id = computed(() => store.playsongid)
watch(id, (n, o) => {
  pause.value = false

})
//监听歌词滚动

// let lyricIndex
// let index = 0
// const listenLyric = function () {

//   setInterval(() => {
//     // if (audio.value) { return }
//     for (index; index < musicStore.lyricsList.length; index++) {
//       // if (audio.value.currentTime > musicStore.lyricsList[musicStore.lyricsList.length - 1].time) {
//       //   lyricIndex = musicStore.lyricsList.length - 1
//       //   console.log('haha');
//       //   break;
//       // }

//       if (audio.value.currentTime > musicStore.lyricsList[index].time && audio.value.currentTime < musicStore.lyricsList[index + 1].time) {
//         console.log('当前时间', audio.value.currentTime);
//         // console.log('当前音乐', musicStore.lyricsList[index]);
//         // console.log('当前音乐', musicStore.lyricsList[index]);
//         // console.log(index);
//         console.log('里面', ++index);
//         lyricIndex = index
//         // console.log(lyricIndex);
//       }
//       // console.log(index);
//     }

//   }, 2000);

// }//大函数
// onMounted(() => {
//   listenLyric()
// }) 
</script>

<style lang="less" scoped>
.palycontrol {
  z-index: 51;
  background-color: #fff;
  padding: 0 0.2rem;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 7.5rem;
  height: 1.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #ccc;

  .left {
    display: flex;
    width: 6.5rem;
    // justify-content: space-between;
    align-items: center;

    img {
      border-radius: 50%;
      width: 0.9rem;
      height: 0.9rem;
    }

    .info {
      margin-left: 0.2rem;

      .title {
        margin-top: 0.2rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }

      .tips {
        font-size: 0.25rem;
        color: #ccc;
      }
    }
  }

  .right {
    display: flex;

    svg {
      width: 0.5rem;
      height: 0.5rem;
      margin: 0 0.2rem;
    }
  }
}
</style>
 